<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="200px"><NavMenu></NavMenu></el-aside>
        <el-container>
          <el-header height="60px"><Header></Header></el-header>
          <el-main>
            <el-card class="box-card" shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>社区人员信息</span>
                </div>
              </template>
              <!--工具栏-->
              <div class="tool-nav">
                <el-input placeholder="搜索" v-model="searchStr" class="search" >
                  <template #prepend>
                    <el-select v-model="select" placeholder="Select" style="width: 80px">
                      <el-option label="姓名" value="name"/>
                      <el-option label="电话" value="telephone" />
                      <el-option label="住址" value="address" />
                      <el-option label="类型" value="type" />
                      <el-option label="备注" value="remark" />
                    </el-select>
                  </template>
                </el-input>
                <el-button @click="fuzzySearch">
                  <el-icon class="icon-button"><Search /></el-icon>
                  <p>搜索</p>
                </el-button>
                <el-button @click="all">
                  <el-icon class="icon-button"><refresh-right /></el-icon>
                  <p>全部</p>
                </el-button>
                <el-button
                  style="width: 120px;"
                  type="primary"
                  @click="addPersonnel">
                  <el-icon class="icon-button"><plus /></el-icon>
                  <p>添加社区人员</p>
                </el-button>
              </div>
              <!--工具栏-->
              <!--数据-->
              <el-table :data="tableData" style="width: 100%" height="350" v-loading="loading">
                <el-table-column type="expand">
                  <template #default="props">
                    <el-row>
                      <el-col :span="12" class="detail-info">
                        <p >姓名: {{ props.row.name }}</p>
                        <p >年龄: {{ props.row.old }}</p>
                        <p >性别: {{ props.row.sex }}</p>
                        <p >电话: {{ props.row.telephone }}</p>                        
                        <p >住址: {{ props.row.address }}</p>
                      </el-col>
                      <el-col :span="12">
                        <p >是否居住此社区: {{ props.row.live }}</p>
                        <p >类型: {{ props.row.type }}</p>
                        <p >创建时间: {{ props.row.createTime }}</p>
                        <p >更新时间: {{ props.row.updateTime }}</p>
                      </el-col>
                    </el-row>
                    <el-row class="detail-info">
                        <p >备注: {{ props.row.remark }}</p>
                      </el-row>
                  </template>
                </el-table-column>
                <el-table-column label="姓名" prop="name" width="85"/>
                <el-table-column label="年龄" prop="old" width="70"/>
                <el-table-column label="性别" prop="sex" width="70"/>
                <el-table-column label="电话" prop="telephone" width="140"/>
                <el-table-column label="类型" prop="type" width="100"/>
                <el-table-column label="住址" prop="address" />
                <el-table-column label="操作" width="120">
                  <template #default="scope">
                    <el-button
                      type="primary"
                      size="small"
                      style="width:30px"
                      @click="handleEdit(scope.$index)">
                      <el-icon><edit /></el-icon>
                    </el-button>
                    <el-button
                      type="danger"
                      size="small"
                      style="width:30px"
                      @click="handleDelete(scope.row)">
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <PersonnelEdit ref="edit" @updateData="updateData"></PersonnelEdit>
              <!--数据-->
              <!--分页-->
              <div class="pagination">
                <el-pagination
                  :page-sizes="[5, 10]"
                  :background="background"
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="pageSize"
                  :current-page="pageNO"
                  @current-change="handleCurrentChange"
                />
                </div>
              <!--分页-->
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from '@/components/NavMenu.vue'
import Header from '@/components/Header.vue'
import PersonnelEdit from '../components/PersonnelEdit.vue'
import { ElMessage } from "element-plus";

export default {
  name: 'HomeView',
  components: {
    NavMenu,
    Header,
    PersonnelEdit
  },
  data() {
    return {
      tableData: [],
      searchStr:'',
      select:'name',
      total:0,
      pageSize:7,
      pageNO:1,
      loading:true
    }
  },
  methods: {
    //跳转添加社区人员页面
    addPersonnel(){
      this.$router.push({
          name: "personneladd",
      });
    },
    //加载全部社区人员信息
    loadPersonnelInfo(){
      var that=this;
      let params = {
        pageNO:this.pageNO,
        pageSize:this.pageSize
      };
      this.axios
      .post("/community/all", params)
      .then(function (response) {
        that.tableData=response.data.rows;
        that.total=parseInt(response.data.total);
        that.loading=false;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    //换页 (全部/查询)
    handleCurrentChange(pageNO){
      this.loading=true;
      if(this.searchStr==""){
        this.pageNO=pageNO;
        this.loadPersonnelInfo();
      }
      else{
        this.pageNO=pageNO;
        this.fuzzySearch();
      }
    },
    //编辑社区人员信息对话框
    handleEdit(index) {
      var that=this;
      that.$refs.edit.dialogShow(that.tableData[index]);
    },
    //修改社区人员信息后更新表格数据
    updateData(){
      this.loading=true;
      this.loadPersonnelInfo();
    },
    //删除社区人员信息
    handleDelete(row) {
      var that=this;
      this.loading=true;
      this.axios
        .get("/community/del/"+row.id)
        .then(function () {
          that.loadPersonnelInfo();
          ElMessage({type: 'success', message: "删除成功"});
        })
        .catch(function (error) {
            console.log(error);
        });
    },
    //模糊查询
    fuzzySearch(){
      this.loading=true;
      var that=this;
      let params = {
        pageNO:this.pageNO,
        pageSize:this.pageSize,
        searchStr:this.searchStr,
        select:this.select
      };
      this.axios
      .post("/community/fuzzysearch", params)
      .then(function (response) {
        console.log(response);
        that.tableData=response.data.rows;
        that.total=parseInt(response.data.total);
        that.loading=false;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    //显示全部信息，并清空搜索框
    all(){
      this.loading=true;
      this.loadPersonnelInfo();
      this.searchStr="";
    },
  },
  mounted(){
    this.loadPersonnelInfo();
  }

}
</script>

<style scoped>
:deep(.el-header) { 
  padding: 0;
}
.box-card{
  height: 500px;
}
.card-header{
    float: left;
    line-height: 0px;
    color: var(--el-text-color-regular);
}
.tool-nav{
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
}
.search{
  width: 300px;
  float: left;
  margin-right: 12px;
}
.icon-button{
  margin-right: 5px;
}

el-button, p{
  font-size: 13px;
}
.detail-info{
  padding-left: 60px;
}
.el-pagination{
   
    justify-content: center;
}
.pagination{
 position: fixed;
    bottom: 25px;
    height: 40px;
    width: 940px;
    text-align: center;
}
</style>
